<template>
  <div class="box">
    <Slider v-model="val1"></Slider>
    <Slider v-model="val2" range></Slider>
    <Slider v-model="val3" range></Slider>

    <Slider v-model="val2" :step="5" range></Slider>
    <Slider v-model="val2" :step="5" show-stops range></Slider>

    <Slider v-model="val1" show-input></Slider>

    <Slider v-model="val4" :tip-format="format"></Slider>
    <Slider v-model="val5" :tip-format="hideFormat"></Slider>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val1: 10,
      val2: [20, 60],
      val3: [0, 99],
      val4: 10,
      val5: 15
    }
  },
  methods : {
    format (val) {
      return "当前进度为： " + val + " %";
    },
    hideFormat (val) {
      return null;
    }
  }
}
</script>

<style>

</style>